<script setup lang="ts">
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search, Check, Delete } from "@element-plus/icons-vue";
import { router } from "@/router";
import {
  getPocTactics,
  create_custom_pocs_group,
  add_scan_tactics,
  get_pocs_group,
  delete_pocs_group,
  get_pocs_group_by_custom_id
} from "@/api/tactics";
import { getAsset } from "@/api/asset";
import { message } from "@/utils/message";
import { transGMTToBeijing, transToBeijingNotReduce8 } from "@/utils/regUtil";

defineOptions({
  name: ""
});

const showPocDetailDialog = ref(false);

const firtForm = reactive({
  tacticsDesc: "",
  tacticsName: "",
  linkAssetGroup: ""
});

const firstFormRef = ref<FormInstance>();

const linkAssetForm = reactive({
  linkAssetGroup: ""
});

const linkAssetList = ref([
  // {
  //   create_time: "Thu, 11 Jan 2024 21:41:30 GMT",
  //   create_user: "admin",
  //   group_id: "a12873a1-4d07-4f23-b98e-cd005990",
  //   scope: ["10.10.10.10"],
  //   scope_group_name: "延安",
  //   scope_type: "ip"
  // }
]);

const searchTacticsForm = reactive({
  tacticsName: "",
  httpScanType: "" //httpleakLevel,httpTypeName
});

const firtFormRules = reactive<FormRules>({
  tacticsName: [{ required: true, message: "请输入策略名称", trigger: "blur" }]
});

//严重
const critical = ref([
  // {
  //   author: "zan8in wuhua",
  //   id: "CNVD-2017-20077",
  //   name: "Ueditor\u7f16\u8f91\u5668.net\u7248\u672c\u5b58\u5728\u6587\u4ef6\u4e0a\u4f20\u6f0f\u6d1e",
  //   number: 4,
  //   severity: "critical"
  // }
]);

//必须使用ref,使用reactive值变化，页面不刷新；
const checkedCritical = ref([]);
//用来全选，取消全选时全部赋值
let criticalAllArray = [];
//高危
const high = ref([]);
const checkedHigh = ref([]);
let highAllArray = [];

const middle = ref([]);
const checkedMiddle = ref([]);
let middleAllArray = [];

const low = ref([]);
const checkedLow = ref([]);
let lowAllArray = [];

const info = ref([]);
const checkedInfo = ref([]);
let infoAllArray = [];

//搜索并创建相关逻辑变量
const searchCreateTactics = ref([]);
const checkedSearchCreateTactics = ref([]);
let searchCreateTacticsAllArray = [];

//新创建和历史自定义poc
const tags = ref([]);

//最终选中的自定义组
const checkedTags = ref([]);

//删除已创建的策略
const removeTags = index => {
  if (index + 1 === tags.value.length) {
    searchCreateTactics.value = [];
    searchTacticsForm.tacticsName = "";
  }
  tags.value.splice(index, 1);
  alertSearchTitle.value = "";
};

const alertSearchTitle = ref("");

//全选暂时不需要
const checkedSearchCreateTacticsChange = params => {
  if (params.length !== searchCreateTacticsAllArray.length) {
    httpTypeCheckedAllState.value = false;
  } else if (
    params.length === searchCreateTacticsAllArray.length &&
    params.length !== 0
  ) {
    httpTypeCheckedAllState.value = true;
  }
  console.log("checkedlenght:", params);
};

const activeKey = ref([]);
const scanType = ref("");

//用来记录各漏洞等级全部数据，全选用
const getLeakRankArrayForCheckAll = items => {
  const arr = [];
  for (let index = 0; index < items.length; index++) {
    arr.push(items[index].number);
  }
  return arr;
};

const getPocTacticsList = () => {
  getPocTactics({
    severity: "",
    page: 1,
    per_page: 20000,
    search: searchTacticsForm.tacticsName
  }).then(res => {
    if (res.code === 2000) {
      if (searchTacticsForm.httpScanType === "httpTypeName") {
        //单独展示搜索结果
        let newArr = [
          ...res.data.items.critical,
          ...res.data.items.high,
          ...res.data.items.medium,
          ...res.data.items.low,
          ...res.data.items.info
        ];

        if (newArr.length) {
          httpTypeCheckedAllState.value = false;
          checkedSearchCreateTactics.value = [];
        }

        //如果是首次默认展示前300条
        if (newArr.length > 300 && searchTacticsForm.tacticsName === "") {
          newArr = newArr.slice(0, 300);
        }

        searchCreateTactics.value = newArr;
        searchCreateTacticsAllArray = getLeakRankArrayForCheckAll(newArr);
      } else {
        resetAllCheckedArray();
        // debugger;
        critical.value = res.data.items.critical;
        criticalAllArray = getLeakRankArrayForCheckAll(res.data.items.critical);
        high.value = res.data.items.high;
        highAllArray = getLeakRankArrayForCheckAll(res.data.items.high);
        middle.value = res.data.items.medium;
        middleAllArray = getLeakRankArrayForCheckAll(res.data.items.medium);
        low.value = res.data.items.low;
        lowAllArray = getLeakRankArrayForCheckAll(res.data.items.low);
        info.value = res.data.items.info;
        infoAllArray = getLeakRankArrayForCheckAll(res.data.items.info);
      }
    } else {
    }
  });
};

//获取资产列表
const getAssetList = () => {
  const endParam = {
    group_id: "",
    scope_type: "",
    start_time: "",
    end_time: "",
    scope_group_name: "",
    page: 1,
    per_page: 1000
  };

  getAsset(endParam).then(response => {
    if (response.code == 2000) {
      linkAssetList.value = response.data.asset_groups;
      console.log(linkAssetList);
      // tableData.items = tranEndTableData(response.data.items);
      // currentPage.value = response.data.page;
      // console.log("tableData:", tableData);
    }
  });
};

//创建自定义策略
const createCustomPoc = params => {
  if (checkedSearchCreateTactics.value.length === 0) {
    message("请至少选中一个poc创建策略", { type: "warning" });
    return;
  }
  const filteredSearchCreateTactics = searchCreateTactics.value.filter(item => {
    return checkedSearchCreateTactics.value.includes(item.number);
  });
  const filteredSearchCreateTacticsObject = JSON.parse(
    JSON.stringify(filteredSearchCreateTactics)
  );
  console.log(
    "filteredSearchCreateTacticsObject",
    filteredSearchCreateTacticsObject
  );

  create_custom_pocs_group({
    group_arr: filteredSearchCreateTacticsObject,
    poc_custom_type: "poc_custom",
    group_poc_name: `${
      searchTacticsForm.tacticsName
        ? searchTacticsForm.tacticsName
        : "自定义策略"
    }_${transToBeijingNotReduce8(new Date())}`
  })
    .then(result => {
      if (result.code === 2000) {
        message("创建成功", { type: "success" });
        tags.value.unshift({
          poc_group_name: result.data.group_poc_name,
          group_poc_name: result.data.group_poc_name,
          poc_custom_id: result.data.poc_custom_id
        });
      } else {
        message("创建失败", { type: "error" });
      }
    })
    .catch(err => {});
};

//完成配置
const overSettingToEnd = () => {
  let web_sub_type = "";
  if (searchTacticsForm.httpScanType === "httpTypeName") {
    web_sub_type = "poc_custom";
  } else if (searchTacticsForm.httpScanType === "httpleakLevel") {
    web_sub_type = "poc_level";
  } else if (searchTacticsForm.httpScanType === "alwaysPocName") {
    web_sub_type = "always_poc";
  }

  let state = "";
  if (criticalCheckedAllState.value) {
    state += "critical,";
  }
  if (highCheckedAllState.value) {
    state += "high,";
  }
  if (middleCheckedAllState.value) {
    state += "medium,";
  }
  if (lowCheckedAllState.value) {
    state += "low,";
  }
  if (infoCheckedAllState.value) {
    state += "info,";
  }
  //写一段代码如果state最后一个字符是','的话，去除最后一个字符
  if (state.endsWith(",")) {
    state = state.slice(0, -1);
  }

  debugger;
  const poc_custom_id = [];
  //循环checkedTags，如果有自定义poc，就把checkedTags中的poc_custom_id赋值给poc_custom_id
  checkedTags.value.forEach(tag => {
    poc_custom_id.push(tag.poc_custom_id);
  });

  add_scan_tactics({
    poc_policy_name: firtForm.tacticsName,
    poc_policy_description: firtForm.tacticsDesc,
    poc_config: {
      poc_config_type: scanType.value,
      poc_web_type_sub_type: web_sub_type,
      poc_web_level: state,
      poc_custom_id: poc_custom_id,
      poc_always_id: []
    },
    link_asset_group: linkAssetForm.linkAssetGroup
  })
    .then(result => {
      if (result.code === 2000) {
        message("配置完成", { type: "success" });
        goBack();
      } else {
        message("配置完失败", { type: "error" });
      }
    })
    .catch(err => {});
};

const overSetting = params => {
  console.log(firstFormRef);
  firstFormRef.value.validate(valid => {
    if (valid) {
      if (scanType.value === "") {
        message("请选择扫描类型", { type: "warning" });
        return;
      } else if (
        scanType.value === "web" &&
        searchTacticsForm.httpScanType === ""
      ) {
        message("请选择策略类别", { type: "warning" });
        return;
      } else if (
        scanType.value === "web" &&
        searchTacticsForm.httpScanType === "httpTypeName" &&
        //   searchCreateTactics.value.length === 0
        // ) {
        //   message("请至少选中一个poc创建策略", { type: "warning" });
        //   return;
        // } else if (
        //   scanType.value === "http" &&
        //   searchTacticsForm.httpScanType === "httpTypeName" &&
        //   searchCreateTactics.value.length > 0 &&
        //   checkedSearchCreateTactics.value.length === 0
        // ) {
        //   message("请至少选中一个poc创建策略", { type: "warning" });
        //   return;
        // } else if (
        //   scanType.value === "http" &&
        //   searchTacticsForm.httpScanType === "httpTypeName" &&
        //   checkedSearchCreateTactics.value.length > 0 &&
        tags.value.length === 0
      ) {
        message("请搜索并选中一些poc策略完成自定义创建", { type: "warning" });
        return;
      } else if (
        scanType.value === "web" &&
        searchTacticsForm.httpScanType === "httpleakLevel" &&
        !criticalCheckedAllState.value &&
        !highCheckedAllState.value &&
        !middleCheckedAllState.value &&
        !lowCheckedAllState.value &&
        !infoCheckedAllState.value
      ) {
        message("请至少选一种漏洞等级创建策略", { type: "warning" });
        return;
      } else if (scanType.value === "udp") {
        // message("暂不支持udp扫描", { type: "warning" });
        // return;
      } else if (linkAssetForm.linkAssetGroup === "") {
        debugger;
        message("请选择关联资产组", { type: "warning" });
        return;
      } else {
        //调用接口
        overSettingToEnd();
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

const searchTactis = params => {};

//web,udp扫描类型改变
const tacticsChange = radioValue => {
  resetAllCheckedArray();
  searchTacticsForm.tacticsName = "";
  searchCreateTactics.value = [];
  tags.value = [];
  alertSearchTitle.value = "";
  searchTacticsForm.httpScanType = "";
};

//http分类下扫描类型改变
const httpScanTypeChange = value => {
  console.log("httpScanTypeChange", value);
  searchTacticsForm.tacticsName = "";
  searchCreateTactics.value = [];
  tags.value = [];
  alertSearchTitle.value = "";
  resetAllCheckedArray();
  //切换到后httpTypeName后重新刷新列表
  if (value === "httpTypeName") {
    getPocTacticsList();
    getHistoryCustomPocGroup();
  }
};

const criticalChange = criticalValue => {
  console.log("criticalValue", criticalValue);
  console.log("checkedCritical", checkedCritical);
};

const goBack = () => {
  debugger;
  router.push("/scanmg/scantactics");
};

//用来记录各分类的全选状态；
const criticalCheckedAllState = ref(false);
const criticalCheckedAllStateChange = state => {
  debugger;
  checkedCritical.value = state ? criticalAllArray : [];
};
const highCheckedAllState = ref(false);
const highCheckedAllStateChange = state => {
  checkedHigh.value = state ? highAllArray : [];
};
const middleCheckedAllState = ref(false);
const middleCheckedAllStateChange = state => {
  checkedMiddle.value = state ? middleAllArray : [];
};
const lowCheckedAllState = ref(false);
const lowCheckedAllStateChange = state => {
  checkedLow.value = state ? lowAllArray : [];
};
const infoCheckedAllState = ref(false);
const infoCheckedAllStateChange = state => {
  checkedInfo.value = state ? infoAllArray : [];
};
const httpTypeCheckedAllState = ref(false);
const httpTypeCheckedAllStateChange = state => {
  // debugger;
  // return;
  checkedSearchCreateTactics.value = state ? searchCreateTacticsAllArray : [];
};

/**
 * 重置所有选中数组
 */
const resetAllCheckedArray = () => {
  criticalCheckedAllState.value = false;
  highCheckedAllState.value = false;
  middleCheckedAllState.value = false;
  lowCheckedAllState.value = false;
  infoCheckedAllState.value = false;
  httpTypeCheckedAllState.value = false;
  checkedCritical.value = [];
  checkedHigh.value = [];
  checkedMiddle.value = [];
  checkedLow.value = [];
  checkedInfo.value = [];
  checkedSearchCreateTactics.value = [];
};

const seeDetailPocGroup = ref([]);

const seeDetailPocLength = ref(0);

//查看详情
const seePocDetail = tag => {
  get_pocs_group_by_custom_id({
    poc_custom_id: tag.poc_custom_id
  })
    .then(result => {
      if (result.code === 2000) {
        seeDetailPocGroup.value = result.data;
        seeDetailPocLength.value = result.total;
        showPocDetailDialog.value = true;
      }
    })
    .catch(err => {});
};

const checkedHistoryItemToOverBox = item => {
  //tags组添加进overbox
  checkedTags.value.push(item);
};
//从组里删除
const removeCheckedTagsFromOverBox = index => {
  checkedTags.value.splice(index, 1);
};

//获取历史自定义poc组
const getHistoryCustomPocGroup = () => {
  get_pocs_group({
    create_user: "admin"
  })
    .then(result => {
      if (result.code === 2000) {
        tags.value = result.data;
      }
    })
    .catch(err => {});
};

//
const deleteTagsFromCheckedBox = tag => {
  checkedTags.value = checkedTags.value.filter(
    item => item.poc_custom_id !== tag.poc_custom_id
  );
  console.log(checkedTags);
};

//删除自定义poc组
const deleteCustomPocGroup = tag => {
  //
  delete_pocs_group({
    poc_custom_id: tag.poc_custom_id
  })
    .then(result => {
      if (result.code === 2000) {
        deleteTagsFromCheckedBox(tag);
        message("删除成功", { type: "success" });
        getHistoryCustomPocGroup();
      } else {
        message("删除失败", { type: "error" });
      }
    })
    .catch(err => {});
};

onMounted(params => {
  getPocTacticsList();
  getAssetList();
  // getHistoryCustomPocGroup();
});
</script>
<template>
  <div class="right-container">
    <el-card>
      <el-page-header :icon="ArrowLeft" @click="goBack">
        <template #content>
          <!-- <span class="text-large font-600 mr-3"> 新建策略 </span> -->
        </template>
      </el-page-header>

      <div class="tactics-header padding-left-120">
        <el-form
          :inline="true"
          :model="firtForm"
          :rules="firtFormRules"
          ref="firstFormRef"
          class="demo-form-inline"
          size="small"
          @submit.prevent
        >
          <el-form-item label="策略名称" prop="tacticsName">
            <el-input
              v-model="firtForm.tacticsName"
              placeholder="策略名称"
              maxlength="30"
              clearable
            />
          </el-form-item>

          <el-form-item label="策略描述">
            <el-input
              v-model="firtForm.tacticsDesc"
              placeholder="策略名称"
              maxlength="30"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>

      <div>
        <div>
          <h5 class="border-left-5">poc配置</h5>
          <div class="padding-left-100">
            <el-form
              :inline="true"
              :model="searchTacticsForm"
              size="small"
              @submit.prevent
            >
              <el-form-item>
                <el-radio-group v-model="scanType" @change="tacticsChange">
                  <el-radio label="web">web扫描</el-radio>
                  <el-radio label="udp">udp扫描</el-radio>
                </el-radio-group>
              </el-form-item>

              <br />
              <el-form-item
                label="poc类别"
                prop="httpScanType"
                v-if="scanType === 'web'"
              >
                <el-select
                  v-model="searchTacticsForm.httpScanType"
                  placeholder="请选择策略类别"
                  class="select-hardware"
                  @change="httpScanTypeChange"
                >
                  <el-option label="漏洞等级" value="httpleakLevel" />
                  <el-option label="自定义poc" value="httpTypeName" />
                  <!-- <el-option label="特色poc" value="alwaysPocName" /> -->
                </el-select>
              </el-form-item>

              <el-form-item
                v-if="
                  searchTacticsForm.httpScanType === 'httpTypeName' &&
                  scanType === 'web'
                "
              >
                <el-input
                  v-model="searchTacticsForm.tacticsName"
                  placeholder="请搜索策略并创建"
                  maxlength="30"
                  clearable
                  @keydown.enter.stop="getPocTacticsList"
                >
                  <!-- prefix -->
                  <template #append>
                    <el-button @click="getPocTacticsList" :icon="Search" />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item v-if="false">
                <el-tag
                  v-for="(tag, index) in tags"
                  :key="tag.name"
                  class="mx-1"
                  :closable="true"
                  type="success"
                  @close="removeTags(index)"
                >
                  {{ tag.name }}
                </el-tag>
              </el-form-item>
            </el-form>
          </div>

          <!-- 漏洞等级模块 -->
          <div
            class="padding-left-120"
            v-if="
              searchTacticsForm.httpScanType === 'httpleakLevel' &&
              scanType === 'web'
            "
          >
            <el-alert
              title="温馨提示：由于策略较多，建议根据漏洞等级全选进行任务下发！"
              type="warning"
              show-icon
            />
          </div>

          <!-- 漏洞等级模块checkbox-gruop -->
          <div
            class="collapse-father-box"
            v-if="
              searchTacticsForm.httpScanType === 'httpleakLevel' &&
              scanType === 'web'
            "
          >
            <!-- :bordered="false" -->
            <a-collapse v-model:activeKey="activeKey" accordion>
              <a-collapse-panel key="1" header="严重">
                <!-- critical,high,low, middle-->
                <div class="padding-left-5 checkbox-33">
                  <!-- <el-checkbox-group
                    v-model="checkedCritical"
                    @change="criticalChange"
                  >
                    <el-checkbox
                      v-for="(item, index) in critical"
                      :key="index"
                      :label="item.number"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group> -->
                  <text
                    class="text-width-33"
                    v-for="(item, index) in critical"
                    :key="index"
                    >{{ item.name }}</text
                  >
                </div>
              </a-collapse-panel>

              <a-collapse-panel key="2" header="高危">
                <!-- critical,high,low, middle-->
                <div class="padding-left-5 checkbox-33">
                  <!-- <el-checkbox-group v-model="checkedHigh" @change="highChange">
                    <el-checkbox
                      v-for="(item, index) in high"
                      :key="index"
                      :label="item.number"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group> -->
                  <text
                    class="text-width-33"
                    v-for="(item, index) in high"
                    :key="index"
                    >{{ item.name }}</text
                  >
                </div>
              </a-collapse-panel>
              <a-collapse-panel key="3" header="中危">
                <div class="padding-left-5 checkbox-33">
                  <!-- <el-checkbox-group
                    v-model="checkedMiddle"
                    @change="middleChange"
                  >
                    <el-checkbox
                      v-for="(item, index) in middle"
                      :key="index"
                      :label="item.number"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group> -->
                  <text
                    class="text-width-33"
                    v-for="(item, index) in middle"
                    :key="index"
                    >{{ item.name }}</text
                  >
                </div>
              </a-collapse-panel>
              <a-collapse-panel key="4" header="低危">
                <div class="padding-left-5 checkbox-33">
                  <!-- <el-checkbox-group v-model="checkedLow" @change="lowChange">
                    <el-checkbox
                      v-for="(item, index) in low"
                      :key="index"
                      :label="item.number"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group> -->
                  <text
                    class="text-width-33"
                    v-for="(item, index) in low"
                    :key="index"
                    >{{ item.name }}</text
                  >
                </div>
              </a-collapse-panel>
              <a-collapse-panel key="5" header="探测">
                <div class="padding-left-5 checkbox-33">
                  <!-- <el-checkbox-group v-model="checkedInfo" @change="lowChange">
                    <el-checkbox
                      v-for="(item, index) in info"
                      :key="index"
                      :label="item.number"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group> -->
                  <text
                    class="text-width-33"
                    v-for="(item, index) in info"
                    :key="index"
                    >{{ item.name }}</text
                  >
                </div>
              </a-collapse-panel>
            </a-collapse>
            <span class="critical-all">
              <el-checkbox
                v-model="criticalCheckedAllState"
                @change="criticalCheckedAllStateChange"
                >全选</el-checkbox
              >
            </span>
            <span class="hight-all">
              <el-checkbox
                v-model="highCheckedAllState"
                @change="highCheckedAllStateChange"
                >全选</el-checkbox
              >
            </span>
            <span class="middle-all">
              <el-checkbox
                v-model="middleCheckedAllState"
                @change="middleCheckedAllStateChange"
                >全选</el-checkbox
              >
            </span>
            <span class="low-all">
              <el-checkbox
                v-model="lowCheckedAllState"
                @change="lowCheckedAllStateChange"
                >全选</el-checkbox
              >
            </span>
            <span class="info-all">
              <el-checkbox
                v-model="infoCheckedAllState"
                @change="infoCheckedAllStateChange"
                >全选</el-checkbox
              >
            </span>
          </div>

          <!-- 搜索并创建模块 -->
          <div
            class="search-http-name-box padding-left-100"
            v-if="
              searchTacticsForm.httpScanType === 'httpTypeName' &&
              scanType === 'web'
            "
          >
            <div
              v-if="searchCreateTactics.length"
              class="http-type-name-all-box"
            >
              <span class="http-type-name-all">
                <el-checkbox
                  v-model="httpTypeCheckedAllState"
                  @change="httpTypeCheckedAllStateChange"
                  >全选</el-checkbox
                >
              </span>
              <!-- <span class="create-cus-poc-btn"
                ><el-button type="primary" size="small" @click="createCustomPoc"
                  >创建自定义poc策略</el-button
                >
              </span> -->
              <span class="check-tips" v-if="checkedSearchCreateTactics.length"
                >共为您选中{{
                  checkedSearchCreateTactics.length
                }}条poc策略</span
              >
            </div>
            <div
              class="http-type-name-box padding-left-5"
              v-if="searchCreateTactics.length"
            >
              <div class="checkbox-33">
                <el-checkbox-group
                  v-model="checkedSearchCreateTactics"
                  @change="checkedSearchCreateTacticsChange"
                >
                  <el-checkbox
                    v-for="(item, index) in searchCreateTactics"
                    :key="index"
                    :label="item.number"
                    @change="toChangeCheckedAllState"
                    >{{ item.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>

            <div
              class="create-search-tactics-btn"
              v-if="searchCreateTactics.length"
            >
              <el-button type="primary" size="small" @click="createCustomPoc"
                >创建自定义poc策略</el-button
              >
            </div>

            <!-- 历史poc模块 -->
            <div
              class="history-poc-box"
              v-if="
                searchTacticsForm.httpScanType === 'httpTypeName' &&
                scanType === 'web' &&
                tags.length
              "
            >
              <span>已有的poc组：</span>
              <br />
              <el-button-group
                class="history-poc-item"
                size="small"
                v-for="(tag, index) in tags"
                :key="index"
              >
                <el-button @click="seePocDetail(tag)">{{
                  tag.poc_group_name
                }}</el-button>
                <el-button
                  :icon="Check"
                  type="primary"
                  plain
                  @click="checkedHistoryItemToOverBox(tag)"
                />
                <el-button
                  type="warning"
                  plain
                  :icon="Delete"
                  @click="deleteCustomPocGroup(tag)"
                />
              </el-button-group>
              <!-- <br /> -->
              <!-- <span>特色poc组：</span> -->
            </div>

            <div class="checked-poc-group" v-if="checkedTags.length">
              <el-tag
                v-for="(checkedTag, index) in checkedTags"
                :key="index"
                class="select-tag"
                closable
                @close="removeCheckedTagsFromOverBox(index)"
              >
                {{ checkedTag.poc_group_name }}
              </el-tag>
            </div>
          </div>

          <!-- udp模块 -->
          <div class="padding-left-100" v-if="scanType === 'udp'">
            <el-alert
              title="温馨提示：点击完成配置将进行udp任务下发。"
              type="success"
              show-icon
            />
          </div>
        </div>

        <!-- 关联资产组 -->
        <div class="link-asset">
          <h5 class="border-left-5">关联资产组</h5>
          <div class="padding-left-100">
            <el-form
              :inline="true"
              :model="linkAssetForm"
              size="small"
              class="demo-form-inline"
            >
              <el-form-item label="关联资产组">
                <el-select
                  v-model="linkAssetForm.linkAssetGroup"
                  placeholder="关联资产组"
                  class="select-hardware"
                  clearable
                >
                  <el-option
                    v-for="(asset, index) in linkAssetList"
                    :key="index"
                    :label="asset.scope_group_name"
                    :value="asset.group_id"
                  />
                </el-select>
              </el-form-item>
              <br />
              <el-form-item>
                <el-button type="primary" @click="overSetting"
                  >完成配置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog
      v-model="showPocDetailDialog"
      :show-close="true"
      destroy-on-close
      width="800px"
      height="500px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            {{
              seeDetailPocGroup.length
                ? seeDetailPocGroup[0].group_poc_name
                : ""
            }}poc详情
          </h4>
          <span style="font-size: 14px">共{{ seeDetailPocLength }}条</span>
        </div>
      </template>

      <div class="dialog-poc-detail-box">
        <text
          class="text-width-50"
          v-for="(item, index) in seeDetailPocGroup"
          :key="index"
          >{{ item.name }}</text
        >
      </div>

      <template #footer>
        <div>
          <el-button @click="showPocDetailDialog = false"> 关闭 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.demo-form-inline .el-form-item__label) {
  min-width: 78px;
}

:deep(.ant-collapse) {
  margin-left: 120px;
}

:deep(.el-radio__label) {
  font-weight: 700;
}

:deep(.checkbox-33 .el-checkbox) {
  width: 30%;
  .el-checkbox__label {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出元素宽度的内容 */
    text-overflow: ellipsis;
  }
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

.checkbox-33 {
  height: 200px;
  overflow-y: auto;
}

.checkbox-33 .text-width-33 {
  display: inline-block;
  width: 30%;
  // border: 1px solid #409eff;
  // color: #409eff;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出元素宽度的内容 */
  text-overflow: ellipsis;
  &:hover {
    color: #13c2c2;
  }
}

.dialog-poc-detail-box {
  overflow-y: auto;
  height: 400px;
  .text-width-50 {
    width: 48%;
    margin: 0 1%;
    display: inline-block;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出元素宽度的内容 */
    text-overflow: ellipsis;
    //鼠标移过时变换颜色
    &:hover {
      color: #13c2c2;
    }
  }
}

.border-left-5 {
  border-left: 5px solid #409eff;
  padding-left: 10px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-left-120 {
  padding-left: 120px;
}
.padding-left-100 {
  padding-left: 120px;
}

.link-asset {
  margin-top: 20px;
}

.collapse-father-box {
  position: relative;
  .critical-all {
    position: absolute;
    left: 60px;
    top: 7px;
  }

  .hight-all {
    position: absolute;
    left: 60px;
    top: 54px;
  }

  .middle-all {
    position: absolute;
    left: 60px;
    top: 101px;
  }
  .low-all {
    position: absolute;
    left: 60px;
    top: 148px;
  }
  .info-all {
    position: absolute;
    left: 60px;
    top: 195px;
  }
}

.http-type-name-box {
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  max-height: 200px;
  // overflow-y: auto;
  position: relative;
}

.http-type-name-all-box {
  // line-height: 32px;
}

.http-type-name-all {
  vertical-align: middle;
  padding-left: 5px;
}

.check-tips {
  margin-left: 20px;
  font-size: 14px;
  color: #e6a23c;
  vertical-align: middle;
}

.create-search-tactics-btn {
  margin-top: 10px;
}

.create-cus-poc-btn {
  margin-left: 20px;
}

.checked-poc-group {
  margin-top: 10px;
  border: 1px dashed #e6a23c;
  border-radius: 5px;
  padding: 5px;
  .select-tag {
    margin-left: 5px;
    margin-right: 5px;
  }
}

.history-poc-box {
  margin: 10px 0;
  span {
    font-size: 14px;
  }
  .history-poc-item {
    margin-right: 10px;
    margin-top: 5px;
  }
}

:deep(.el-button-group .el-button--warning:last-child) {
  border-left-color: #f3d19e;
}
</style>
